<template>
	<view class="impressionDiv">
		<!-- 崇礼印象列表页面 -->
		<view class="impressionDivTop">
			<img src="/static/home/chongli.png" alt="" />
		</view>
		<view class="impressionSticky">
			<u-sticky>
				<view class="impressionStickyTabs">
					<u-tabs :list="tabsList" :current="current" lineWidth="20" lineHeight="7"
						:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
					        color: '#303133',
					        fontWeight: 'bold',
					        transform: 'scale(1.05)'
					    }" :inactiveStyle="{
					        color: '#606266',
					        transform: 'scale(1)'
					    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="changeTab">
					</u-tabs>
				</view>
			</u-sticky>
			<view class="impressionStickyB">
				<view class="impressionStickyBI" v-for="(item,index) in cardsData" :key="index"
					@click="amplify(item.photo)">
					<view class="impressionStickyBII">
						<img :src="item.photo[0]" alt="" />
					</view>
					<view class="impressionStickyBIIB">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="load-more" v-if="showLoading">
				<text>滑动到底部加载更多</text>
			</view>
			<view class="load-more" v-if="showNoMore">
				<text>没有更多数据了</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		impressionTitleList,
		chongliImpression
	} from '@/api/home.js'
	export default {
		data() {
			return {
				lineBg: "",
				tabsList: [],
				tabstitle: {},
				current: 0,
				cardsData: [],
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
				total: 0, // 总数据量
				isLoading: false, // 是否正在加载
				showLoading: false, // 显示加载中
				showNoMore: false // 显示没有更多
			};
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			// 页面滚动到底部时触发
			if (this.cardsData.length < this.total) {
				this.pageSize += 10;
				this.getChongliImpression();
			} else if (this.cardsData.length >= this.total) {
				this.showNoMore = true;
				this.showLoading = false;
			}
		},
		methods: {
			amplify(photo) {
				wx.previewImage({
					urls: photo, //接受的是一个数组，默认展示第一张
					current: "",
				});
			},
			// 点击标题切换
			changeTab(val) {
				this.tabstitle = val
				this.cardsData = []
				this.pageSize = 10
				this.getChongliImpression()
			},
			// 获取标题列表
			async getList() {
				let res = await impressionTitleList()
				if (res.code == 200) {
					let arr = []
					res.data.forEach(str => {
						arr.push({
							name: str
						})
					})
					this.tabsList = arr
					this.tabstitle = this.tabsList[0]
					this.getChongliImpression()
				}
			},
			// 获取崇礼印象图片列表
			async getChongliImpression(title) {
				// 显示加载状态
				this.isLoading = true;
				this.showLoading = true;
				this.showNoMore = false;
				let par = {
					title: this.tabstitle.name,
					type: '1',
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				let res = await chongliImpression(par)
				if (res.code == 200) {
					const newData = res.data.list;
					this.total = res.data.total;
					// 合并数据
					if (this.pageNum == 1) {
						this.cardsData = newData;
					} else {
						this.cardsData = this.cardsData.concat(newData);
					}

					// 控制显示状态
					if (this.cardsData.length >= this.total) {
						this.showNoMore = true;
						this.showLoading = false;
					} else {
						this.showNoMore = false;
						this.showLoading = true;
					}
				} else {
					// 无论成功失败，都结束加载状态
					this.isLoading = false;
					this.showLoading = false;
				}
			},
		}
	}
</script>

<style lang="scss">
	.impressionDiv {
		.impressionSticky {


			.load-more {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #666;
			}

			/* 加载动画 */
			.loading-spinner {
				width: 30rpx;
				height: 30rpx;
				border: 3rpx solid #ccc;
				border-top-color: #333;
				border-radius: 50%;
				animation: spin 1s linear infinite;
				margin-right: 16rpx;
			}

			@keyframes spin {
				to {
					transform: rotate(360deg);
				}
			}

			.impressionStickyB {
				padding: 0 30rpx;
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.impressionStickyBI {
					width: calc(50% - 10rpx);
					margin-bottom: 20rpx;
					position: relative;


					.impressionStickyBIIB {
						position: absolute;
						bottom: 0;
						border-radius: 20rpx;
						padding: 15rpx 10rpx;
						width: 100%;
						/* 1. 半透明背景（关键） */
						background: rgba(255, 255, 255, 0.2);
						/* 白色半透明，可根据背景调整颜色/透明度 */
						/* 2. 模糊效果（核心） */
						backdrop-filter: blur(10rpx);
						/* 背景模糊，数值越大越模糊 */
						-webkit-backdrop-filter: blur(10rpx);
						/* 兼容 Safari */
						/* 柔和阴影 */
						color: #ffffff;
						font-size: 24rpx;
					}

					.impressionStickyBII {
						width: 100%;
						height: 500rpx;


						img {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}
				}
			}

			.impressionStickyTabs {
				width: 100%;
				padding: 10rpx 0;
				background-color: #b4c3c3;
			}
		}

		.impressionDivTop {
			width: 100%;
			height: 500rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	page {
		background-color: #b4c3c3;
	}
</style>